<template>
  <drag-dialog v-model="visible" title="字段显隐/禁用规则配置">
    <el-form ref="form" label-width="100px" label-position="right" label-suffix=":" :rules="rules" :model="localData">
      <el-form-item label="规则名称" prop="name">
        <el-input v-model="localData.name" placeholder="请输入规则名称" style="width: 400px" />
      </el-form-item>
      <el-form-item label="规则类型" prop="type">
        <el-radio-group v-model="localData.type">
          <el-radio label="display">显隐控制</el-radio>
          <el-radio label="disabled">禁用控制</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="规则启用">
        <el-switch v-model="localData.enable" />
      </el-form-item>
      <div class="rule-label"> 规则配置 </div>
      <display-rule-item v-model="localData.rules" :fields="fields" />
      <div class="rule-label"> {{ localData.type == 'display' ? '显示' : '启用' }}字段 </div>
      <div style="margin-left: 25px">
        <div style="font-size: 12px; color: #7f7f7f"
          >tips: 以下字段默认{{ localData.type == 'display' ? '隐藏' : '禁用' }},只有当规则条件满足时才{{ localData.type == 'display' ? '显示' : '启用' }}</div
        >
        <el-select v-model="localData.fields" multiple clearable style="width: 400px">
          <el-option v-for="field in fields" :key="field.prop" :label="field.fieldName" :value="field.prop" />
        </el-select>
      </div>
    </el-form>
    <template #footer>
      <dialog-footer @ok="submit" @cancel="cancel" />
    </template>
  </drag-dialog>
</template>

<script>
import { cloneDeep } from 'lodash-es';
import displayRuleItem from './displayRuleItem.vue';

export default {
  name: 'DisplayRuleSetting',
  components: { displayRuleItem },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      visible: false,
      rules: { name: [{ required: true, message: '规则名称不能为空', trigger: 'blur' }], type: [{ required: true, message: '规则类型不能为空', trigger: 'blur' }] }
    };
  },
  computed: {
    fields() {
      return this.getCallableCompList(this.options);
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.visible = newVal;
      },
      immediate: true
    },
    visible(newVal) {
      this.$emit('update:modelValue', newVal);
    },
    data: {
      handler(newVal) {
        this.localData = cloneDeep(newVal);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    submit() {
      if (!this.checkRulesValid(this.localData.rules[0])) {
        this.$message.error('规则配置不完整');
        return;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.localData);
          this.cancel();
          this.$refs.form.resetFields();
        }
      });
    },
    cancel() {
      this.visible = false;
    },
    checkRulesValid(rule) {
      let res = true;
      const { children, isGroup, field, condition } = rule;
      if (!isGroup && (!field || !condition)) {
        res = false;
      }
      if (isGroup && children && children.length) {
        const resArr = children.map((child) => this.checkRulesValid(child));
        res = resArr.findIndex((item) => item === false) === -1;
      }
      return res;
    }
  }
};
</script>

<style lang="scss" scoped>
.rule-label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 90%;
  height: 30px;
  margin-bottom: 18px;

  &::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #fff;
    border-bottom: 1px #ccc solid;
  }

  &::after {
    content: '';
    display: inline-block;
    flex: 1;
    height: 1px;
    background-color: #fff;
    border-bottom: 1px #ccc solid;
  }
}
</style>